<template>
  <section class="hot-search">
    <div class="section-header">
      <h2>热门搜索</h2>
      <button class="refresh-btn" @click="refreshTags">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
          <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
        </svg>
        换一批
      </button>
    </div>
    <div class="hot-tags">
      <button 
        v-for="(tag, index) in displayTags" 
        :key="tag"
        class="hot-tag"
        :class="{ 'hot': index < 3 }"
        @click="handleClick(tag)"
      >
        <span v-if="index < 3" class="hot-index">{{ index + 1 }}</span>
        {{ tag }}
      </button>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  // 可从外部传入热门标签，或使用默认值
  tags: {
    type: Array,
    default: null
  }
})

const emit = defineEmits(['search'])

// 默认热门标签列表（TODO: 需要从API获取）
const allTags = ref([
  '碧流河水库', '松花江', '辽河', '大伙房水库', '观音阁', 
  '浑河', '太子河', '鸭绿江', '柴河水库', '桓仁水库', 
  '清河水库', '汤河水库', '白石水库', '大凌河', '小凌河'
])

const displayTags = ref([])

// 刷新标签
function refreshTags() {
  const source = props.tags || allTags.value
  displayTags.value = [...source].sort(() => Math.random() - 0.5).slice(0, 9)
}

function handleClick(tag) {
  emit('search', tag)
}

onMounted(() => {
  refreshTags()
})
</script>

<style scoped>
.hot-search {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.refresh-btn:hover {
  color: #00d4ff;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hot-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.hot-tag:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.3);
  color: #00d4ff;
}

.hot-tag.hot {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.hot-tag.hot:hover {
  background: rgba(239, 68, 68, 0.2);
}

.hot-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
</style>

